<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
import axios from 'axios';

// 查询参数
const timeType = ref('小时');
const areaType = ref('商业区');
const operator = ref('ALL');
const networkType = ref('ALL');

const dateMinusDay = (date, days) => {
  const d = new Date(date);
  d.setDate(d.getDate() - days);
  return d;
};
const lastWeek = dateMinusDay(new Date(), 7);
// 添加日期范围 ref
const dateRange = ref({ start: lastWeek, end: new Date() });

// 下拉选项
const timeTypeOptions = ['小时', '天', '月'];

const areaTypeOptions = ['大学', '居民区', '商业区'];

const networkTypeOptions = ['ALL', '4G', '3G', '2G'];

// 提交查询
const submitQuery = () => {
  fetchChartData();
};

const chartRef = ref<HTMLElement | null>(null);
let chart: echarts.ECharts | null = null;

const fetchChartData = async () => {
  try {
    const params = {
      dateRange: dateRange.value,
      timeType: timeType.value,
      areaType: areaType.value,
      networkType: networkType.value,
    };

    const response = await axios.get('/api/signal/track', {});
    const { legends, seriesData, xaxisData } = response.data.data;

    if (!chart ||!chartRef.value) return;

    const option: echarts.EChartsOption = {
      title: {
        text: '典型地标信号强度跟踪图',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      legend: {
        data: legends,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: xaxisData,
        },
      ],
      yAxis: [
        {
          type: 'value',
          // min: -120, // 纵坐标最小值设置为 -120
          // max: 0,    // 纵坐标最大值设置为 0
        },
      ],
      series: legends.map((legend, index) => ({
        name: legend,
        type: 'line',
        smooth: true,
        areaStyle: {
          opacity: 0.3,
        },
        emphasis: { focus: 'series' },
        data: seriesData[index],
        label:
          index === legends.length - 1
           ? {
                show: true,
                position: 'top',
              }
            : undefined,
      })),
    };

    chart.setOption(option);
  } catch (error) {
    console.error('获取图表数据失败:', error);
  }
};

const initChart = () => {
  if (!chartRef.value) return;
  chart = echarts.init(chartRef.value);
  fetchChartData();
};

onMounted(() => {
  initChart();
  window.addEventListener('resize', () => {
    chart?.resize();
  });
});

// 当任何查询参数变化时重新获取数据
watch([dateRange, timeType, areaType,  networkType], () => {
  fetchChartData();
});
</script>

<template>
  <VaCard>
    <VaCardContent>
      <div class="flex flex-col justify-between gap-2 mb-4 md:flex-row">
        <div class="flex flex-col justify-start gap-2 md:flex-row">
          <VaDateInput v-model="dateRange" mode="range" label="日期范围" placeholder="日期范围" />
          <VaSelect v-model="timeType" :options="timeTypeOptions" label="时间粒度" placeholder="时间粒度" />
          <VaSelect v-model="areaType" :options="areaTypeOptions" label="地标" placeholder="地标" />
          <VaSelect v-model="networkType" :options="networkTypeOptions" label="网络类型" placeholder="网络类型" />
        </div>
        <div class="flex gap-2">
          <VaButton @click="submitQuery">查询</VaButton>
        </div>
      </div>
      <!-- ECharts 容器 -->
      <div ref="chartRef" style="width: 100%; height: calc(100vh - 245px)"></div>
    </VaCardContent>
  </VaCard>
</template>

<style>
.va-date-input {
  width: 200px;
}
.va-select {
  width: 180px;
}
.va-button {
  margin-top: 16px;
  height: 35px;
  width: 80px;
}
</style>
